<template>
	<view class="box">
		<!-- 搜索组件 -->
		<my-search></my-search>
		<!-- 轮播图view -->
		<swiper indicator-active-color="#1DB0FC" :indicator-dots="true" :autoplay="true" :interval="3000"
			:duration="1000" :circular="true">
			<swiper-item v-for="item in swiperList" :key="item.id">
				<view class="swiper-item">
					<image :src="item.img"></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 存放公告view -->
		<view class="announcement" @click="getNewsDetails">
			<!-- 新闻图片 -->
			<image src="../../static/xinwen.png"></image>
			<view class="split">|</view>
			<!-- 新闻介绍 -->
			<view class="newsTitle line1">悟空商品正式开发中, 请大家来体验吧</view>
			<!-- 箭头 -->
			<view class="iconfont icon-xiangyou"></view>
		</view>
		<!-- 分类导航view -->
		<view class="nav-list">
			<view @click="navCilckHandler(item)" class="nav-item" v-for="item in navCateList" :key="item.id">
				<!-- 每个分类导航view -->
				<view class="item">
					<!-- 分类导航图片 -->
					<image :src="item.image_src" class="nav-img"></image>
					<!-- 分类导航文字 -->
					<text class="nav-cate-font">{{ item.name }}</text>
				</view>
			</view>
		</view>
		<!-- 端午海报 -->
		<view @click="goZongzi" class="zongzi">
			<image src="/static/zongzi.jpg" mode=""></image>
		</view>
		<!-- 超值爆款 -->
		<view class="shop-recommend">
			<!-- 超值爆款字体view -->
			<view class="explosions-view">
				<view class="title">超值爆款</view>
				<view class="txt">美好生活由此开始</view>
			</view>
			<!-- 商品view -->
			<view class="explosions-shops">
				<!-- 4款商品view -->
				<view class="shop-item" v-for="item in hotNewGoods" @click="getHotNews(item)" :key="item.id">
					<view class="con-box">
						<!-- 标题 -->
						<view class="title line1">{{ item.name }}</view>
						<!-- 商品介绍 -->
						<view class="con line2">{{ item.sign }}</view>
						<view class="go">GO！
							<!-- 图标 -->
							<image src="/static/jiantou.png" mode=""></image>
						</view>
					</view>
					<image :src="item.image_src"></image>
				</view>
			</view>
		</view>
		<!-- 推荐商品 -->
		<view class="push-goods-view">
			<!-- 商品推荐id -->
			<view class="nav-bd">
				<view class="items" @click="getPush('1')">
					<view :class="[pushId == '1' ? 'active' : '', 'txt']">首发新品</view>
					<view :class="[pushId == '1' ? 'show' : '', 'label']">最新出炉</view>
				</view>
				<view class="items" @click="getPush('2')">
					<view :class="[pushId == '2' ? 'active' : '', 'txt']">精品推荐</view>
					<view :class="[pushId == '2' ? 'show' : '', 'label']">猜你喜欢</view>
				</view>
				<view class="items" @click="getPush('3')">
					<view :class="[pushId == '3' ? 'active' : '', 'txt']">热门榜单</view>
					<view :class="[pushId == '3' ? 'show' : '', 'label']">好评如云</view>
				</view>
				<view class="items" @click="getPush('4')">
					<view :class="[pushId == '4' ? 'active' : '', 'txt']">促销单品</view>
					<view :class="[pushId == '4' ? 'show' : '', 'label']">多买多销</view>
				</view>
			</view>
			<!-- 商品 -->
			<view class="list-box">
				<!-- 每个商品 -->
				<view class="list-box-itme" v-for="item in pushGoodsList" :key="item.id">
					<image @click="goGoodsDetails(item.id, item.goods_id)" :src="item.goods_images[0]"></image>
					<!-- 商品名称 -->
					<view class="goods_name">{{ item.goods_name }}</view>
					<!-- 商品信息 -->
					<view class="goods-info">
						<!-- 商品价格 -->
						<view class="goods_price">￥{{ item.goods_price }}</view>
						<!-- 商品销售数量 -->
						<view class="goods_sales">已售{{ item.goods_sales }}件</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="foot">蜀ICP备2023008183号-1</view>
	</view>
</template>

<script>
	// 导入api文件
	import api from "../../api/api.js";
	export default {
		data() {
			return {
				// 推送商品id
				pushId: "1",
				// 轮播图列表
				swiperList: [],
				// 分类导航列表
				navCateList: [],
				// 超值爆款列表
				hotNewGoods: [],
				// 首页推送商品列表
				pushGoodsList: [],
			}
		},
		methods: {
			// 点击分类导航跳转指定页面
			navCilckHandler(item) {
				console.log(item.id, item.name);
				// 判断点击的是哪个分类导航
				if (item.name == "分类") {
					uni.switchTab({
						url: "/pages/cate/cate"
					})
				} else if (item.id == 3 || item.id == 4 || item.id == 7 || item.id == 5) {
					// 跳转商品大分类
					console.log();
					uni.navigateTo({
						url: `/pages/homeGoods/home_details/home_details?navId=${item.id}&name=${item.name}`,
					})
				} else if (item.id == 2) {
					// 上新公告页面
					uni.navigateTo({
						url: "/pages/homeGoods/new_details/new_details",
					})
				} else if (item.id == 8) {
					// 购物车页面
					uni.switchTab({
						url: "/pages/cart/cart",
					})
				} else if (item.id == 1) {
					// 优惠卷
					uni.navigateTo({
						url: "/pages/homeGoods/coupon/coupon",
					})
				} else if (item.id == 6) {
					// 积分商城
					uni.navigateTo({
						url: "/pages/homeGoods/integration/integration",
					})
				} else if (item.id == 9) {
					// 余额
					uni.navigateTo({
						url: "/pages/homeGoods/balance/balance",
					})
				}
			},

			// 点击跳转新闻公告页面
			getNewsDetails() {
				uni.navigateTo({
					url: "/pages/homeGoods/new_details/new_details"
				})
			},

			goZongzi() {
				uni.navigateTo({
					url: `/pages/goods/zongzi/zongzi?nav_id=255`
				})
			},

			// 点击跳转超值爆款
			getHotNews(item) {
				uni.navigateTo({
					url: `/pages/homeGoods/HotNewGoods/HotNewGoods?type=${item.id}&name=${item.name}`
				})
			},
			// 获取首页推送商品
			getPush(index) {
				this.pushId = index;
				// 获取首页推送商品
				api.getPushGoods(this.pushId, {
					"page": 1,
					"limit": 10
				}).then(res => {
					// 获取失败
					if (res.data.status != 200) return uni.$showMsg(400, res.data.data.err);
					// 获取成功
					this.pushGoodsList = res.data.data.list;
					uni.$showMsg(res.data.msg);
				})
			},
			// 跳转商品详情页
			goGoodsDetails(id, goodsId) {
				uni.navigateTo({
					url: `/pages/goods/goods_details/goods_details?id=${id}&goods_id=${goodsId}`
				})
			}
		},
		onLoad() {
			const type = uni.getSystemInfoSync().uniPlatform;
			// 获取轮播图数据
			api.getSliders().then(res => {
				// 获取失败
				if (res.data.status != 200) return uni.$showMsg(400, res.data.data.err);
				// 获取成功
				this.swiperList = res.data.data.data;
				uni.$showMsg(res.data.msg);
			});

			// 获取分类导航数据
			api.getNavCates().then(res => {
				// 获取失败
				if (res.data.status != 200) return uni.$showMsg(400, res.data.data.err);
				// 获取成功
				this.navCateList = res.data.data.navCateList;
				uni.$showMsg(res.data.msg);
			});

			// 获取超值爆款数据
			api.getHotNewGoods().then(res => {
				// 获取失败
				if (res.data.status != 200) return uni.$showMsg(400, res.data.data.err);
				// 获取成功
				this.hotNewGoods = res.data.data.hotNewGoods;
				uni.$showMsg(res.data.msg);
			});
			// 获取首页推送商品
			this.getPush(this.pushId);
		}
	}
</script>

<style>
	/* 轮播图view */
	swiper {
		height: 330rpx;
	}

	.swiper-item {
		margin: 20rpx auto;
		width: 95%;
		height: 95%;
		border-radius: 12px;
	}

	image {
		width: 100%;
		height: 100%;
	}

	/* 存放公告view */
	.announcement {
		width: 95%;
		height: 41px;
		margin: 20rpx auto;
		border-radius: 10px;
		background-color: white;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: nowrap;
		border-top: 1px solid #f4f4f4;
		box-shadow: 0 5px 16px #f5f5f5;
	}

	/* 新闻图片 */
	.announcement image {
		width: 100px;
		height: 19px;
		margin-left: 30rpx;
	}

	/* 分割线 */
	.announcement .split {
		font-size: 14px;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	/* 新闻介绍 */
	.announcement .newsTitle {
		width: 100%;
		font-size: 12px;
		text-align: left;
		color: rgb(51, 51, 51);
	}

	/* 箭头 */
	.announcement .iconfont {
		font-size: 14px;
		color: #888;
		font-family: iconfont !important;
		font-style: normal;
	}

	.icon-xiangyou:before {
		content: ">";
		margin-right: 30rpx;
	}

	/* 分类导航view */
	.nav-list {
		margin: 20rpx auto;
		width: 95%;
		display: flex;
		flex-wrap: wrap;
		border-radius: 10px;
		background-color: white;
	}

	/* 每个分类导航view */
	.item {
		width: 140rpx;
		height: 148rpx;
		box-sizing: border-box;
		border: 1px solid white;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}

	/* 分类导航图片 */
	.item .nav-img {
		width: 45px;
		height: 45px;
	}

	/* 分类导航文字 */
	.item .nav-cate-font {
		margin-top: 15rpx;
		font-size: 14px;
		color: rgb(51, 51, 51);
	}

	.zongzi {
		width: 95%;
		height: 300rpx;
		margin: 30rpx auto;
		border-radius: 7px;
	}

	.zongzi image {
		width: 100%;
		height: 100%;
		border-radius: 7px;
	}

	/* 超值爆款 */
	.shop-recommend {
		position: relative;
		width: 95%;
		height: 500rpx;
		background-color: #D0F0FF;
		margin: 30rpx auto;
		border-radius: 10px;
	}

	/* 超值爆款字体view */
	.shop-recommend .explosions-view {
		position: absolute;
		top: 20rpx;
		left: 18rpx;
		width: 95%;
		height: 42rpx;
		border-radius: 5px;
		display: flex;
	}

	.shop-recommend .explosions-view .title {
		color: rgb(29, 176, 252);
		font-size: 17px;
		font-weight: 700;
		margin-right: 6px;
	}

	.shop-recommend .explosions-view .txt {
		padding: 0 5px;
		margin-top: 1rpx;
		height: 19px;
		line-height: 19px;
		border-radius: 13px 0 13px 0;
		color: #fff;
		text-align: center;
		font-size: 11px;
		box-shadow: 3px 1px 1px 1px rgba(9, 139, 243, 0.1);
		background: linear-gradient(90deg, rgb(29, 176, 252) 0%, rgb(64, 209, 244) 100%);
	}

	/* 商品view */
	.shop-recommend .explosions-shops {
		position: absolute;
		top: 80rpx;
		left: 18rpx;
		width: 95%;
		height: 398rpx;
		border-radius: 10px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		margin-top: 12rpx;
	}

	/* 4款商品view */
	.explosions-shops .shop-item {
		width: 325rpx;
		height: 180rpx;
		background-color: white;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		background-color: #fff;
		padding: 0 10px;
		box-sizing: border-box;
	}

	.explosions-shops .shop-item .con-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 69px;
		height: 100%;
	}

	/* 标题 */
	.explosions-shops .shop-item .con-box .title {
		color: #282828;
		font-size: 14px;
	}

	/* 标题 */
	.line1 {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* 商品介绍 */
	.explosions-shops .shop-item .con-box .con {
		color: #999;
		font-size: 10px;
		margin-top: 1px
	}

	/* 商品介绍 */
	.explosions-shops .shop-item .con-box .line2 {
		text-overflow: ellipsis;
		word-wrap: break-word;
		word-break: break-all;
		white-space: normal;
		overflow: hidden;
	}

	/* 第一个go */
	.explosions-shops .shop-item .con-box .go {
		background: linear-gradient(90deg, #4bc4ff, #207eff);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 5px;
		width: 59px;
		height: 19px;
		border-radius: 9px;
		color: #fff;
		font-size: 13px;
		font-weight: 700;
		font-style: italic;
	}

	/* 第二个go */
	.explosions-shops .shop-item:nth-child(2) .con-box .go {
		background: linear-gradient(90deg, #ff9043, #ff531d);
	}

	/* 第三个go */
	.explosions-shops .shop-item:nth-child(3) .con-box .go {
		background: linear-gradient(90deg, #96e187, #48ce2c);
	}

	/* 第四个go */
	.explosions-shops .shop-item:nth-child(4) .con-box .go {
		background: linear-gradient(90deg, #ffc560, #ff9c00);
	}

	/* 图标 */
	.explosions-shops .shop-item .con-box .go image {
		width: 13px;
		height: 13px;
		display: inline-block;
		overflow: hidden;
		position: relative;
	}

	.explosions-shops .shop-item .con-box .go image>img {
		width: 100%;
		height: 100%;
	}


	/* 超值爆款商品图片 */
	.explosions-shops .shop-item image {
		width: 74px;
		height: 74px;
		display: inline-block;
		overflow: hidden;
		position: relative;
	}

	.explosions-shops .shop-item image>img {
		width: 100%;
		height: 100%;
	}

	/* 推荐商品 */
	.push-goods-view {}

	/* 商品推荐id */
	.push-goods-view .nav-bd {
		height: 85rpx;
		display: flex;
		align-items: center;
		margin-top: 16px;
	}

	.nav-bd .items {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 25%;
	}

	.nav-bd .items .txt {
		font-size: 17px;
		color: #282828;
	}

	.nav-bd .items .label {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 66px;
		height: 17px;
		margin-top: 5rpx;
		font-size: 12px;
		color: #999;
		border-radius: 8px;
	}

	.nav-bd .items .active {
		color: rgb(29, 176, 252);
	}

	.nav-bd .items .show {
		background: rgb(29, 176, 252);
		color: rgb(255, 255, 255);
	}

	/* 商品 */
	.list-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		margin-top: 16px;
	}

	/* 每个商品 */
	.list-box .list-box-itme {
		margin-top: 10rpx;
		width: 330rpx;
		height: 500rpx;
		margin-bottom: 25rpx;
		background-color: #fff;
		border-radius: 10px;
		overflow: hidden;
		position: relative;
		display: flex;
		flex-direction: column;
	}

	.list-box .list-box-itme image {
		width: 330rpx;
		height: 360rpx;
	}

	/* 商品名称 */
	.list-box .list-box-itme .goods_name {
		padding: 20rpx 10rpx;
		box-sizing: border-box;
		color: #222;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 13px;
	}

	/* 商品信息 */
	.goods-info {
		display: flex;
		align-items: center;
	}

	/* 商品价格 */
	.list-box .list-box-itme .goods-info .goods_price {
		color: rgb(253, 80, 47);
		padding: 0 10rpx;
		font-weight: 600;
		font-size: 17px;
	}

	/* 商品销售数量 */
	.list-box .list-box-itme .goods-info .goods_sales {
		margin-top: 5rpx;
		font-size: 11px;
		color: #aaa;
	}

	/* 底部 */
	.foot {
		width: 300rpx;
		height: 39px;
		margin: 80rpx auto;
		display: block;
		font-size: 12px;
		text-align: center;
		line-height: 39px;
		color: #CCCCCC;
	}
</style>